<template>
	<view class="">
		<view class="items example" style="margin-top: 20rpx;">
			<uni-forms ref="form" :modelValue="formData" :rules="rules" label-width="200rpx" label-position="rigth">
				<view class="" style="padding: 30rpx;">
					<uni-forms-item label="姓名" name="name">
						<view class="value flex-end" style="padding-top: 14rpx;">
							<uni-easyinput type="text" v-model="formData.name" placeholder="请输入" placeholder-class="class"
								:data-key="formData.name"  class="input" />
							<!-- <uni-easyinput type="digit" @input="change" placeholder="请输入姓名"> -->
						</view>
					</uni-forms-item>
					<view class="" style="border-bottom: 1rpx solid #E8E8E8;"></view>
					<uni-forms-item label="性别" name="sex">
						<view class="" style="padding-top: 14rpx;">
							<!-- <uni-easyinput type="text" v-model="formData.person" placeholder="请输入" placeholder-class="class"
								:data-key="formData.person" :value="formData.person" class="input" /> -->
							<uni-data-checkbox mode="tag" v-model="formData.sex" :localdata="formData.sexArray">
							</uni-data-checkbox>

						</view>
					</uni-forms-item>
					<view class="" style="border-bottom: 1rpx solid #E8E8E8;"></view>

					<uni-forms-item label="手机号" name="number">
						<view class="" style="padding-top: 14rpx;">
							<uni-easyinput type="text" v-model="formData.number" placeholder="请输入" placeholder-class="class"
								:data-key="formData.number"  class="input" />
						</view>
					</uni-forms-item>
					<view class="" style="border-bottom: 1rpx solid #E8E8E8;"></view>
					<uni-forms-item label="出生日期" name="time">
						<!-- 	<view class="" style="padding-top: 14rpx;">
							<uni-data-checkbox v-model="formData.idType" :localdata="idTypeArray" @change="changeidType"
								class="checkBox" selectedColor="#0ABA94"></uni-data-checkbox>
						</view> -->
						<view class="picker flex-end" style="padding-top: 14rpx;">
							<view>
								<picker @change="bindPickerChange" :value="index" :range="array" mode="date">
									<view class="picker-right">
										<view class="uni-input">{{index}}</view>
										<view class="img">
											<image class="icon" src="http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static//my/icon-right.png"></image>
										</view>
									</view>
								</picker>
							</view>
						</view>
					</uni-forms-item>
					<view class="" style="border-bottom: 1rpx solid #E8E8E8;"></view>
					<uni-forms-item label="所在地区" name="area" class="picker flex-end">
						<view class="picker flex-end" style="padding-top: 14rpx;">
							<view>
								<uni-data-picker v-model="formData.location" :localdata="regions" popup-title="行政区域" :border="false"/>
								<!-- <picker @change="bindPickerChangeArea" :value="indexArea" :range="array">
									<view class="picker-right">
										<view class="uni-input">{{array[indexArea]}}</view>
										<view class="img">
											<image class="icon" src="http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static//my/icon-right.png"></image>
										</view>
									</view>
								</picker> -->
							</view>
						</view>
					</uni-forms-item>
					<view class="" style="border-bottom: 1rpx solid #E8E8E8;"></view>



					<uni-forms-item label="个人简介" name="introduction" class=" flex-bt active2">
						<!-- 	<view class="introduction flex-bt active2">
						
						</view> -->
					</uni-forms-item>
					<textarea :value="formData.introduction" @input="change" :data-key="formData.introduction"
						placeholder="请输入" cols="30" rows="10" class="active2 flex-bt"
						placeholder-class="introduction-class"></textarea>
					<view class="" style="border-bottom: 1rpx solid #E8E8E8;"></view>

					<uni-forms-item label="证件照信息" name="IDImg">

					</uni-forms-item>
					<uni-file-picker ref="files" limit='1' @select="select" @progress="progress" @success="success"
						@fail="fail" :auto-upload="false" v-model="formData.IDImg" file-mediatype="image" />
					<view class="" style="border-bottom: 1rpx solid #E8E8E8;">
					</view>
					<!-- 	<view class=""
						style="  display: flex;font-size: 24rpx;justify-content: center;width: 750rpx;align-items: center;">
						<uni-data-checkbox v-model="defaultAgree" :multiple="true" :localdata="agreeArray"
							class="checkBox" selectedColor="#0ABA94"></uni-data-checkbox>
						<text style="margin-left: -40rpx;">我已阅读并同意</text>
						<text style="color: #0ABA94; ">平台协议</text>
					</view> -->
					<view class="radio m-t-60" @click="setCheck()">
						<radio value="r1" color='#0ABA94' :checked="check" />我已阅读并同意
						<span class="rd" @click.stop="toPrivacyAgreement(4)">
							{{formData.title}}
						</span>
					</view>
					<uni-forms-item label="" name="isDefault" label-width="0rpx">
						<view class="" style="padding-top: 14rpx;">
							<uni-data-checkbox v-model="formData.isDefault" :multiple="true" class="checkBox"
								:localdata="defaultArray" selectedColor="#0ABA94"></uni-data-checkbox>
						</view>
					</uni-forms-item>
				</view>
				<view class="" style="border-bottom: 20rpx solid #F1F4FC;">

				</view>
				<!-- <view class="" style="padding: 30rpx;">

				</view> -->
			</uni-forms>
			<view class="" style="height: 200rpx;background: #F1F4FC;">

			</view>
		</view>
		<view class="" style="position: fixed; bottom: 30rpx;">

			<view class="" style="display: flex; justify-content: center;width: 750rpx;">
				<button class="button" @click="submit">提交</button>
			</view>

		</view>
	</view>


</template>

<script setup lang="ts">
	import requestHttp from '@/providers/essential/httpService.js'
	import { ref, getCurrentInstance } from 'vue';
	import regions from '../addressEdit/region-data.json';
	const {
		proxy
	} = getCurrentInstance() as any
	const array = ref(['中国', '美国', '巴西', '日本'])
	const index = ref('请选择')
	const indexArea =  ref(0)
	const imgUrl = ref([])
	const rules = ref([])
	// const title = ref { "<<入住协议>>" }
	const formData = ref({
		name: "",
		age: '',
		hobby: "sss",
		title: "<<陪护师协议>>",
		sex: 0,
		sexArray: [{
			text: '女',
			value: 0
		}, {
			text: '男',
			value: 1
		}]
	})
	
	let check = ref(false)
	let setCheck = () => {
		check.value = !check.value
	}
	
	const toPrivacyAgreement = (id) => {
		uni.navigateTo({ url: `/pages/accompany-tmp/my/privacyAgreement/privacyAgreement?id=${id}` });
	}

	const bindPickerChange = (e) => {
		console.log('picker发送选择改变，携带值为', e.detail.value)
		index.value = e.detail.value
	}
	
	const bindPickerChangeArea = (e) => {
		console.log('picker发送选择改变，携带值为', e.detail.value)
		indexArea.value = e.detail.value
	}
	
	function submit() {
		// addMerchants
		if (check.value === true) {
			formData.value.idCardNumber = formData.value.idCardNumber.toString()
			let url = proxy.$API.addMerchants
			let param = {
				...formData.value
			}
			proxy.$UNIHTTP.postData(url, param).then((res: any) => {
				if (res.code == -1) {
					uni.showToast({
						title: "提交成功！！"
					});
				}
			})
		} else {
			uni.showToast({
				title: "请勾选同意！"
			});
		}
	}
	
</script>

<style lang="scss">
	page {
		background: #F1F4FC;
	}


	.example {
		/* width: 100%; */
		/* padding: 30rpx; */
		background-color: #fff;
	}


	.button {


		display: flex;
		align-items: center;
		justify-content: center;
		width: 680rpx;
		/* margin: 56upx auto; */
		background-color: #0ABA94;
		color: #FFFFFF;
		font-size: 32upx;
		border-radius: 40rpx;
		height: 80rpx;
	}

	.class {
		text-align: right;
		// margin-bottom: -10px;
	}

	.input {
		text-align: right;

		.uni-input-wrapper {
			margin-top: 10px;
		}
	}

	.picker {
		// background-color: #0ABA94;
		width: 100%;

		.img {
			width: 5%;

			.icon {
				width: 32rpx;
				height: 32rpx;
				display: block;
				margin-left: 16rpx;
			}

		}

		.uni-input {
			&.placeholder {
				color: rgba(140, 143, 148, 1);
			}
		}
	}

	.picker-right {
		display: flex;
		justify-content: flex-end;

		.uni-input {
			color: #808080;
		}
	}

	textarea {
		width: 100%;
		display: block;
		height: 120rpx;
	}

	.introduction {
		display: flex;
	}

	.items {
		width: 100%;

		&.active2 {
			height: auto;
			flex-wrap: wrap;

			.label {
				width: 100%;
				padding-top: 28rpx;
			}

			.value {
				width: 100%;
				flex: inherit;
				margin-top: 32rpx;
			}
		}
	}

	.flex-bt {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.introduction-class {
		width: 370px;
	}

	.rd {
		color: #0ABA94;
	}

	:deep(.uni-data-checklist .checklist-group) {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-end;


	}

	:deep(.uni-data-checklist .checklist-group .checklist-box.is--tag.is-checked) {
		background-color: #0aba94;
		border-color: #0aba94;
	}
</style>
